
<!-- 
@descrition: 用户的角色，
@descrition: 如果有多个角色，也只显示一个，其余的在点击这个角色的时候，通过弹窗的方式，列举他的项目。 
@descrition: 如果有多个角色，按钮上方，是不是要有个小点，显示数量。
@auth: 'xjp' 
-->
<template>
	<view class="wc-box">
		<view class="role-name" @click="open">
			<slot>
				<text>{{ firstRole.name }}</text>
				<!-- <text class="flexiop">3</text> -->
				<u-badge :offset="[-10, -10]" :font-size="18" type="error" :count="userInfoRoleList.length" v-if="userInfoRoleList.length > 1"></u-badge>
			</slot>
		</view>
		<u-popup v-model="show" mode="center" width="570rpx" >
			<view class="wc-box__body"  @click.self="close">
				
				<view style="position: relative;background-color: #ffffff; border-radius: 20rpx;">
					<u-icon @click="close" class="close-icon" size="40" name="close-circle-fill" color="#000000"></u-icon>
					<view class="avatar-wrap">
						<view class="avatar-abs">
							<u-avatar size="174" :src="avatarSrc"  mode="circle"></u-avatar>
						</view>
						
						<!-- close-circle-fill -->

						
					</view>
					
					<view class="poppoi">
						
						<view class="poppo" v-for="(item, index) in userInfoRoleList" :key="index">
							<u-image mode="scaleToFill"  width="506rpx" height="100rpx" :src="item.src"></u-image>
							<text class="poppo-name">{{ item.name }}</text>
							<!-- {{ item.name }} -->
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	/**
	 * @descrition: '' 
	 * @auth: '' 
	 */
	
	export default {
		props: {
			
		},
		data() {
			return {
				show: false
			}
		},
		computed: {
			userInfoRoleList() {
				const field = 'identity_list'
				if (this.userInfo && this.userInfo[field] && Array.isArray(this.userInfo[field])) {
                   
					const retVal = this.userInfo[field].map(item => {
                        const imgNameIndex = item.weights % 6 + 1
						return {
							...item,
							src: `/static/images/user_info/weights__${imgNameIndex}.png`
						}
					}) || []
                    return retVal
                    // return retVal.filter(item => item.type !== 'level')
				}
				return []
			},
			firstRole() {
				if (this.userInfoRoleList.length) {
					console.log(this.userInfoRoleList,this.userInfo);
					return this.userInfoRoleList[0]
				}
				return {
					name: '',
					weights: 0
				}
			},
			avatarSrc() {
				if (this.userInfo && this.userInfo.avatar) {
					return this.userInfo.avatar
				}
				return ``
			}
		},
		watch:{},
		created() {},
		mounted() {},
		methods: {
			open() {
				this.show = true
			},
			close() {
				this.show = false
			}
		}
	}
</script>

<style lang="scss" scoped>

.wc-box {
	position: relative;
}
.role-name {
	display: inline-block;
	padding: 2rpx 10rpx;
	background: #fff;
	color:#000;
	font-size: 22rpx;
	border-radius: 20rpx;
	vertical-align: middle;
}
.flexiop {
	width: 30rpx;
	height: 30rpx;
	background-color: #f90e06;
	border-radius: 50%;
	text-align: center;
	font-size: 24rpx;
	line-height: 34rpx;
	color: #FFFFFF;

}
.wc-box__body {
	position: relative;
	padding-top: 173rpx;
}

.avatar-wrap{
	position: relative;
	width: 100%;
	height: calc(214rpx / 2);
	background: #ffffff;
	border-radius:20rpx 20rpx 0 0;
}
.avatar-abs {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 50%;
	width: 214rpx;
	height: 214rpx;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border: 5rpx solid #dddddd;
	border-radius: 50%;
	background-color: #fff;
	box-shadow:  2rpx 2rpx #dddddd;
}
.u-avatar {
	width: 174rpx;
	height: 174rpx;
	// border: 5rpx solid #dddddd;
	border-radius: 50%;
}
.close-icon {
	position: absolute;
	z-index: 2;
	right: 10rpx;
	top: 10rpx;
	padding: 10rpx;
}
.poppoi{
	position: relative;
	width: 100%;
	height: 100%;
	padding: 20rpx;
	background: #ffffff;
	border-radius: 0 0 20rpx 20rpx;
	.poppo{
		position: relative;
		margin: 0 auto 27rpx;
		color: #F76E00;
		width: 506rpx;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		background: #ffffff;
		border-radius: 20rpx;
	
	}
	.poppo-name {
		position: absolute;
		z-index: 2;
		left: 0;
		top: 0;
		width: 506rpx;
		height: 100rpx;
		padding-left: 83rpx;
		text-align: left;
		line-height: 100rpx;
		font-size: 36rpx;
		color: #ffffff;
	}
}
</style>